@tailwind base;
@tailwind components;
@tailwind utilities;


:root {
  --color-primary: var(--color-blue);
  --color-primary-hover: var(--color-blue-hover);
  --color-primary-active: var(--color-blue-active);
  --color-primary-disable: var(--color-blue-disable);
  --color-primary-thin: var(--color-blue-thin);
  --color-white: #fff;
  --color-blue: #00AEEC;
  --color-blue-hover: #24c1f9;
  --color-blue-active: #0090c3;
  --color-blue-disable: rgba(0, 174, 236, .5);
  --color-blue-thin: rgba(0, 174, 236, 0.1);
  --color-pink: #fb7299;
  --color-pink-hover: #ff70a3;
  --color-pink-active: #E15584;
  --color-pink-disable: rgba(255, 102, 153, 0.5);
  --color-pink-thin: rgba(255, 102, 153, 0.1);
  --color-yellow: #FFB027;
  --color-yellow-hover: #ffa13c;
  --color-yellow-active: #e2991a;
  --color-orange-disable: #ffd07f;
  --color-yellow-thin: rgba(255, 176, 39, 0.1);
  --color-orange: #FF7F24;
  --color-orange-hover: #FF9A2E;
  --color-orange-active: #D25F00;
  --color-orange-disable: #FFCF8B;
  --color-orange-thin: #FF7F241a;
  --color-green: #2AC864;
  --color-green-hover: #3CE47A;
  --color-green-active: #009A29;
  --color-green-disable: #7BE188;
  --color-green-thin: rgba(42, 200, 100, 0.1);
  --color-grey: #e3e5e7;
  --color-red: #F85A54;
  --color-red-hover: #ff7873;
  --color-red-active: #D94640;
  --color-red-disable: #FBACA3;
  --color-red-thin: rgba(248, 90, 84, 0.1);
  --color-white: #fff;
  --color-black: #28292C;
  --color-bg1: #fff;
  --color-bg2: #f2f3f5;
  --color-bg3: #eff1f3;
  --color-text1: #28292C;
  --color-text2: #646c7a;
  --color-text3: #9499A0;
  --color-text4: #C9CCD0;
  --color-border-light: #F1F2F3;
  --color-border-regular: #e3e8ec;
  --color-border-bold: #c9ccd0;
  --border-radius: 8px;
  --border-radius-s: 4px;
  --font-h1: 22px;
  --font-h2: 18px;
  --font-h3: 16px;
  --font-h4: 14px;
  --font-small: 12px;
}
